<template>
  <div class="articleList">
    <!-- 列表数据 -->
    <!-- <el-table :data="list" stripe @selection-change="handleSelectionChange"> -->
    <el-table :data="list">
      <!-- <el-table-column type="selection"></el-table-column> -->
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="板块" width="95px" prop="sectionId"></el-table-column>
      <el-table-column label="点赞" width="70px" prop="likeCount"></el-table-column>
      <el-table-column label="修改时间" width="140px" prop="updateTime">
        <template #default="scope">
          {{ formatDate(scope.row.updateTime) }}
        </template>
        <!-- </el-table-column> -->
      </el-table-column>
      <el-table-column label="操作" width="150px" header-align="center">
        <template #default="scope">
          <el-button bg type="primary" size="small" @click="edit(scope.row.id)"
            >修改</el-button
          >
          <el-button bg type="danger" size="small" @click="removeById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryInfo.total"
    >
    </el-pagination>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, reactive, defineProps } from "vue";
import { listBlogByUser, delBlog } from "@/api/blog";
import { onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  user: {
    type: Object,
    required: true,
  },
});

const userId = computed(() => props.user.userId);

const list = ref([]);

const queryInfo = ref({
  page: 1,
  size: 5,
  total: 0,
});

onMounted(() => {
  getList();
});

function edit(id: any) {
  ElMessage.info("待开发");
}

function getList() {
  listBlogByUser(userId.value, queryInfo.value.page, queryInfo.value.size).then((res) => {
    if (res.code !== 200) {
      return;
    }
    const { current, records, total, pages } = res.data;
    list.value = records;
    queryInfo.value.total = total;
    queryInfo.value.page = current;
  });
}

function handleSelectionChange(val: any) {
  console.log(val);
}

function handleSizeChange(size: any) {
  queryInfo.value.size = size;
  getList();
}

function handleCurrentChange(page: any) {
  queryInfo.value.page = page;
  getList();
}

async function removeById(id: any) {
  console.log(id);
  const confirmResult = await ElMessageBox.confirm("是否删除？, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).catch((err) => err);

  if (confirmResult !== "confirm") {
    return ElMessage.info("取消删除");
  }
  delBlog(id).then((res) => {
    if (res.code !== 200) {
      return;
    }
    ElMessage.success(res.message);
    getList();
  });
}
</script>

<style></style>
